<template>
    <div class="control-box" :style="[ styles ]">
        <ModuleBg :base="base"/>
        <ul class="navigate">
            <li v-for="(item,index) in list" :key="index" :style="{ width: `${100 / base.c}%` }">
                <div class="img" >
                    <img v-if="item.img.s == 1" :src="item.img.p" alt="默认图片">
                    <img v-if="item.img.s == 3" :src="item.img.i" alt="上传图片">
                </div>
                <CText class="p" :text="item.text" v-if="!item.text.s" />
            </li>
        </ul>
        <Swap :index="index" />
    </div>
</template>

<script>
import props from '@/mixin/props.js'
export default {
    props:{
        list:{
            type: Array,
        }
    },
    mixins:[ props ],
    data() {
        return {}
    },
    methods: {
    },
}
</script>

<style lang="scss" scoped>
.navigate{position: relative;padding: 15px;z-index: 2;
    &>li{display: inline-block;text-align: center;vertical-align: top;
        .img{width: 45px;height: 45px;margin: 0 auto;margin-top: 5px;margin-bottom: 10px;border-radius: 4px;border: 1px solid #ddd;overflow: hidden;display: flex;align-items: center;justify-content: center;
            img{width: 290%;height: auto;object-fit: cover;}
        }
        .p{margin-bottom: 5px !important;}
    }
}
</style>

